<template>
  <div class="con">
    <ul class="left">
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="handleClick(item.id)"
        :class="['tabli', { active: item.id === selData }]"
      >
        {{ item.text }}
      </li>
    </ul>
    <el-row
      class="right"
      type="flex"
      justify="space-between"
      v-show="selData == 0"
    >
      <div class="big">
        <div class="shang">
          <!-- 大监控 -->
          <hkv :url="url" />
        </div>
        <div class="xia">
          <chart />
          <aqi />
          <anniu @giveFather="getSon" />
        </div>
      </div>
      <!-- 小监控 -->
      <ul class="small">
        <li v-for="(item, index) in videos" :key="index">
          <video
            ref="hlsVideoSmoll"
            muted="muted"
            preload="true"
            @dbclick="handleD(item)"
          />
        </li>
      </ul>
    </el-row>
    <div v-if="selData == 1 || selData == 2" class="otherDiv">暂无数据</div>
  </div>
</template>
<script>
import Chart from "@/components/echarts";
import aqi from "@/components/aqi";
import hkv from "@/components/hkv";
import anniu from "@/components/quyu";
import Hls from "hls.js";
export default {
  name: "shipin",
  components: { Chart, aqi, hkv, anniu },
  data() {
    return {
      selData: 0,
      list: [
        { id: 0, text: "阳城县鑫途化工厂", isActive: true },
        { id: 1, text: "阳城县富宁化工厂", isActive: false },
        { id: 2, text: "阳城县宏昌化工厂", isActive: false },
      ],
      sel: null,
      videolist: [
        { name: "视频一", id: "0" },
        {
          name: "视频二",
          id: "1",
        },
        { name: "视频三", id: "2" },
        {
          name: "视频四",
          id: "3",
        },
        { name: "视频五", id: "4" },
        {
          name: "视频六",
          id: "5",
        },
        { name: "视频七", id: "6" },
        {
          name: "视频八",
          id: "7",
        },
        { name: "视频九", id: "8" },
        {
          name: "视频十",
          id: "9",
        },
        { name: "视频十一", id: "10" },
        {
          name: "视频十二",
          id: "11",
        },
        { name: "视频十三", id: "12" },
        {
          name: "视频十四",
          id: "13",
        },
        { name: "视频十五", id: "14" },
        {
          name: "视频十六",
          id: "15",
        },
      ],
      videoId: null,
      videos: [],
      url: "",
    };
  },
  created() {},
  mounted() {
    this.videos = [];
    for (let i = 0; i < 8; i++) {
      let item = {
        hls: null,
      };
      this.videos.push(item);
    }
    this.$nextTick(() => {
      this.attach();
    });
    this.playVideo();
  },
  methods: {
    handleClick(id) {
      this.selData = id;
    },

    attach() {
      for (let index = 0; index < this.videos.length; index++) {
        if (Hls.isSupported()) {
          this.videos[index].hls = new Hls();
          let hlsVideo = this.$refs.hlsVideoSmoll[index];
          this.videos[index].hls.attachMedia(hlsVideo);
          this.videos[index].hls.on(Hls.Events.MANIFEST_PARSED, () => {
            console.log("加载成功");
            hlsVideo.play();
          });
          this.videos[index].hls.on(Hls.Events.ERROR, (event, data) => {
            // 监听出错事件
            console.log("加载失败");
            console.log(event, data);
          });
          // this.videos[index].hls.on(Hls.Events.ERROR, function (event, data) {
          // if (data.fatal) {
          //   switch (data.type) {
          //     // 网络错误导致的错误，据观察这种类型的错，占比最高
          //     case Hls.ErrorTypes.NETWORK_ERROR:
          //       // 根据自己业务（心跳/错误次数 需要加载还是重新请求，这里只给出简单的，加载情况作为示例）
          //       // hls.startLoad();
          //       break;
          //     case Hls.ErrorTypes.MEDIA_ERROR:
          //       // 多媒体错误
          //       // hls.recoverMediaError();
          //       break;
          //     default:
          //       this.videos[channel - 2].hls.destroy();
          //       this.$nextTick(() => {
          //         // 非网络或多媒体错误，重新获取url
          //         this.playVideo(channel);
          //       });
          //       break;
          //   }
          // }
        }
      }
    },
    // 播放实时监控
    playVideo() {
      let _this = this;
      _this
        .axios({
          method: "GET",
          url: "http://39.106.19.200:9900/api/camera/list",
          // url: "http://39.106.19.200:3000/mock/183/api/api/camera/list",
          timeout: 5000,
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            "Access-Control-Allow-Origin": "*",
          },
        })
        .then(function (res) {
          // console.log(res);
          //将数据遍历赋值给——this.videos 将list中第一个赋值给——this.url
          if (res.status == 200) {
            if (res.data.code == 20000) {
              if (res.data.data) {
                _this.url = res.data.data[0].playUrl;
                for (var i = 0; i < res.data.data.length; i++) {
                  if (res.data.data[i].zoneId == 0) {
                    _this.videos[i].hls.loadSource(res.data.data[i].playUrl);
                  }
                }
              }
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    getSon(temp) {
      console.log(temp);
    },
    handleD(data) {
      console.log(data);
      // this.url=
    },
  },
  // 销毁
  deactivated() {
    for (let i = 0; i < this.videos.length; i++) {
      this.videos[i].hls.destroy();
    }
  },
};
</script>
<style scoped>
.con {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
}
ul {
  margin: 0;
}
ul li {
  list-style: none;
  cursor: pointer;
}
ul.left {
  width: 15%;
  height: 100%;
  background: #3681cc;

  padding: 20px 0 0;
  box-sizing: border-box;
}
ul.left li {
  color: #fff;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: 1;
}
ul.left li.active {
  background: #fff;
  color: #3681cc;
}
.right {
  width: 85%;
  height: 100%;
  background: rgba(47,73,137,0.7)
}
.big {
  width: 60%;
  height: 100%;
}
.small {
  width: 40%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
}
.small li {
  width: 50%;
  height: 25%;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.small li video {
  width: 100%;
  height: 100%;
}
.shang {
  width: 100%;
  height: 75%;
  padding: 0 5px;
  box-sizing: border-box;
}
.xia {
  width: 100%;
  height: 25%;
  box-sizing: border-box;
  display: flex;
  padding: 2px 5px;
}
.anniu {
  width: 40%;
  height: 100%;
}
.anniu ul,
.anniu li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.anniu ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px;
}
.anniu li {
  cursor: pointer;
  padding: 3px 0;
  font-size: 12px;
  width: 25%;
}
.anniu li.active {
  color: #2f4989;
  font-weight: 600;
}
.otherDiv {
  text-align: center;
  width: 85%;
  font-size: 30px;
}
</style>